<template>
  <div class="recommend-container">
    <div class="recommend-inner">
      <div class="recommend-l">
        <RecommendItem
          v-for="item in leftCard"
          :key="item.id"
          :data="item"
        ></RecommendItem>
      </div>
      <div class="recommend-r">
        <RecommendItem
          v-for="item in rightCard"
          :key="item.id"
          :data="item"
        ></RecommendItem>
      </div>
    </div>
  </div>
</template>

<script>
import RecommendItem from "../RecommendItem/index.vue";
import request from "@/api/default.js";
import { onMounted, reactive } from "vue";
export default {
  components: {
    RecommendItem,
  },
  setup() {
    const leftCard = reactive([]);
    const rightCard = reactive([]);
    onMounted(async () => {
      const data = await request("/buycard");
      const mid = Math.floor(data.data.length / 2);
      leftCard.push(...data.data.slice(0, mid));
      rightCard.push(...data.data.slice(mid, data.data.length));
    });

    return {
      leftCard,
      rightCard,
    };
  },
};
</script>

<style scoped>
.recommend-container {
  display: flex;
  flex-direction: row;
}
.recommend-inner {
  display: flex;
  flex-direction: row;
}
</style>